<template>
  <div
    :class="ui.isDark ? 'q-pa-md bg-grey-9 text-white' : ''"
    style="display: flex; flex-direction: column; height: 100%"
  >
    <q-scroll-area style="flex: 9">
      <q-expansion-item
        expand-separator
        icon="play_circle_filled"
        v-model="runExpanded"
        :label="$t('devicePage.InstructionList.执行中')"
        :caption="$t('devicePage.指令列表')"
        :dark="ui.isDark"
      >
        <q-card
          v-for="(item, index) in runInstructionList"
          :key="item"
          :dark="ui.isDark"
        >
          <q-card-section>
            <q-item clickable v-ripple>
              <q-item-section>
                <span v-html="handleContent(index, item.content)"></span>
                <q-item-label caption style="color: rgb(255, 99, 99)"
                  >类型：{{ item.type }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-card-section>
        </q-card>
      </q-expansion-item>

      <q-expansion-item
        expand-separator
        icon="pending"
        v-model="waitExpanded"
        :label="$t('devicePage.InstructionList.待执行')"
        :caption="$t('devicePage.指令列表')"
        :dark="ui.isDark"
      >
        <q-card
          v-for="(item, index) in waitInstructionList"
          :key="item"
          :dark="ui.isDark"
        >
          <q-card-section>
            <q-item clickable v-ripple>
              <q-item-section>
                <span v-html="handleContent(index, item.content)"></span>
                <q-item-label caption style="color: rgb(255, 99, 99)"
                  >类型：{{ item.type }}
                </q-item-label>
              </q-item-section>
            </q-item>
          </q-card-section>
        </q-card>
      </q-expansion-item>
    </q-scroll-area>

    <div class="row flex-center">
      <q-btn
        no-caps
        class="text-subtitle1 q-mt-sm col"
        color="primary"
        stretch
        v-show="runInstructionList.length > 0"
        :label="!isPause ? '暂停' : '继续'"
        @click="pauseResume"
        type="submit"
      >
      </q-btn>
      <q-btn
        no-caps
        class="text-subtitle1 q-mt-sm q-ml-xs col"
        color="primary"
        stretch
        v-show="runInstructionList.length > 0"
        label="重试指令"
        @click="retryInstruction"
        type="submit"
      >
      </q-btn>
      <q-btn
        no-caps
        class="text-subtitle1 q-mt-sm q-ml-xs"
        stretch
        label="清空第一条指令"
        v-show="runInstructionList.length > 0"
        @click="clearFirstInstruction"
        color="negative"
        type="button"
      ></q-btn>
      <q-btn
        no-caps
        class="text-subtitle1 q-mt-sm col q-ml-xs"
        stretch
        label="清空队列"
        v-show="runInstructionList.length > 0 || waitInstructionList.length > 0"
        color="negative"
        type="button"
        @click="clearAllInstruction"
      ></q-btn>
    </div>
  </div>
</template>

<script setup>
import { useUiStore } from "stores/ui";
import { ref, watch } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "src/stores/api";
import { useQuasar } from "quasar";
import { status } from "src/utils/deviceWs";

const $q = useQuasar();
const ui = useUiStore();
defineProps({
  runInstructionList: {
    type: Array,
    require: true,
  },
  waitInstructionList: {
    type: Array,
    require: true,
  },
});
const isPause = ref(false);
const runExpanded = ref(true);
const waitExpanded = ref(true);

function handleContent(index, content) {
  // return '内容：' + JSON.stringify(content)
  return `<span style='color:red;font-weight:bold'>${
    index + 1
  }. </span>内容：${JSON.stringify(content)}`;
}

watch(
  () => status.value.status,
  (status) => {
    isPause.value = status === "pause";
  },
  {
    immediate: true,
  }
);

/**
 * 暂停继续
 */
function pauseResume() {
  let url;
  if (!isPause.value) {
    url = "amr/pause";
    // 暂停
  } else {
    url = "amr/resume";
    // 继续
  }
  api.get(useAPIStore().amrUrl + url).then((rs) => {
    if (rs.data === "done") {
      $q.notify({ type: "positive", message: "success" });
      isPause.value = !isPause.value;
    } else {
      $q.notify({ type: "negative", message: "fail" });
    }
  });
}

/**
 * 重试指令
 */
function retryInstruction() {
  api.get(useAPIStore().amrUrl + "amr/retry").then((rs) => {
    if (rs.data === "done") {
      $q.notify({ type: "positive", message: "success" });
    } else {
      $q.notify({ type: "negative", message: "fail" });
    }
  });
}

/**
 * 清空第一条指令
 */
function clearFirstInstruction() {
  api.get(useAPIStore().amrUrl + "amr/pause").then((rs) => {
    // 先暂停
    if (rs.data === "done") {
      $q.notify({ type: "positive", message: "success" });
      isPause.value = !isPause.value;
      // 删除
      api
        .delete(useAPIStore().amrUrl + "amr/cmd/processing/first")
        .then((rs) => {
          if (rs.data === "done") {
            $q.notify({ type: "positive", message: "success" });
            // 复位
            api.get(useAPIStore().amrUrl + "amr/resume").then((rs) => {
              if (rs.data === "done") {
                isPause.value = !isPause.value;
              } else {
                $q.notify({ type: "negative", message: "fail" });
              }
            });
          } else {
            $q.notify({ type: "negative", message: "fail" });
          }
        });
    } else {
      $q.notify({ type: "negative", message: "fail" });
    }
  });
}

/**
 * 清空所有指令
 */
function clearAllInstruction() {
  api.get(useAPIStore().amrUrl + "amr/clear").then((rs) => {
    if (rs.data === "done") {
      $q.notify({ type: "positive", message: "success" });
    } else {
      $q.notify({ type: "negative", message: "fail" });
    }
  });
}
</script>

<style scoped></style>
